<script setup>
import { ref, defineOptions } from 'vue'
import { detailTag } from '@/api/getAxios_2.ts'
import { useRoute } from 'vue-router';
import TopTitle from "@/components/TopTitle.vue"
import { showToast } from 'vant';
import { showLoadingToast } from 'vant';



const route = useRoute()
const Tags = ref([])
console.log(route.query);
detailTag(route.query.tags, 'visit', '1').then((res) => {
    console.log(res);
    Tags.value = res.data.data.list
})

// 弹出层
const show = ref(false);
const showPopup = () => {
    show.value = true;
};

// 切换模式
let option = ref('')
const chooseOption = (e) => {
    // console.log(e.target.getAttribute('name'));
    Tags.value = []
    show.value = false
    option.value = e.target.getAttribute('name')
    document.querySelectorAll('.mask li').forEach((o) => {
        o.classList.remove('light')
    })
    e.target.classList.add('light')
    detailTag(route.query.tags, option, '1').then((res) => {
        Tags.value = res.data.data.list
    })
}


// 滚动到底请求数据
let flag = true
let pageNo = ref('1')
const scrollHandler = (e) => {
    const li = document.querySelector('.total').children[Tags.value.length - 1]

    if (e.target.scrollTop + 980 >= li.offsetTop && flag) {
        flag = false
        pageNo.value = (Number(pageNo.value) + 1).toString()
        detailTag(route.query.tags, option.value, pageNo.value).then((res) => {
            if (res.data.data.list.length == 0) {
                showToast('已经到底啦！')
                return
            }
            showLoadingToast({
                message: '加载中...',
                forbidClick: true,
                duration: 1000
            });
            res.data.data.list.forEach(o => Tags.value.push(o))
            flag = true
        })
    }
}


</script>
<template>
    <div class="box" @scroll="scrollHandler($event)">
        <TopTitle :flag="true" :name="route.query.tags">
            <van-cell title="排序" @click="showPopup" :style="{ color: '#dd737d' }" />
            <van-popup v-model:show="show" :style="{ padding: '0', marginTop: '50px' }" position="top">
                <ul class="mask" @click="chooseOption($event)">
                    <li class="light" name="visit">点击量</li>
                    <li name="update">更新时间</li>
                    <li name="recommend_ticket">推荐票</li>
                    <li name="onshelf_total">收藏数</li>
                </ul>
            </van-popup>
        </TopTitle>
        <div class="city-msg">
            <ul class="total">
                <li v-for="item in Tags" @click="$router.push(`/BookInfo?storyId=${item.id}`)">
                    <div class="coverImg">
                        <img :src="item.cover" alt="">
                    </div>
                    <div class="msg">
                        <p class="name">{{ item.name }}</p>
                        <p class="detail">{{ item.introduce }}</p>
                        <p class="type">
                            <span class="author-type">{{ item.authorName }} | {{ item.type }}</span>
                            <span class="fireValue">{{ (item.fireValue / 100000).toFixed(1) + '万人气值' }}</span>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<style scoped lang='less'>
.box {
    height: 100vh;
    overflow: scroll;

    &::-webkit-scrollbar {
        display: none;
    }

}

.van-overlay {
    top: 20vw
}

.mask {
    li {
        width: 100%;
        padding: 0;

        &.light {
            color: #dd737d;
        }
    }
}



.city-msg {
    background-color: #fff;

    ul {
        display: flex;
        flex-direction: column;

        li {
            padding: 10px;
            height: 40vw;
            display: flex;

            .coverImg {

                border-radius: 10px;
                width: 30vw;
                height: 40vw;

                img {
                    border-radius: 10px;
                    box-shadow: 0px 15px 7px -11px rgba(0, 0, 0, .3);

                    width: 100%;
                    height: 100%;
                }
            }

            .msg {
                text-align: center;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                width: 68vw;
                margin-left: 10px;

                .name {
                    font-size: 18px;

                }

                .detail {
                    display: -webkit-box;
                    text-align: center;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    color: #939296;
                    font-size: 14px;
                }

                .type {

                    color: #939296;
                    font-size: 12px;

                    .fireValue {
                        margin-left: 20px;
                        color: #ccae59;
                    }
                }


            }

        }
    }
}
</style>